<template>
    <router-link
        class="book-seal-component"
        :to="`/ContentDisplay/BookDetail/${bookData.id}??f=DigitalJournal&code=digital-journal`"
    >
        <div class="content-box">
            <div class="book-title">{{bookData.title || '--'}}</div>
            <img class="seal-img" :src="bookData.cover" alt=""/>
        </div>
    </router-link>
</template>

<script>
export default {
    name: "BookSealComponent",
    props:{
        bookData:{
            type:Object,
            default(){
                return {}
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../../assets/global.less";
//phone
@media only screen and (max-width:576px){
    @width: 20vw;
    @height:34vw;
    .book-seal-component{
        border:1px solid red;
        width:@width;
        height:@height;
        display:flex;
        justify-content: center;
        align-items: center;
        .content-box{
            width:@width;
            height:@height;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
            position:relative;
            .book-title{
                position:absolute;
                width:@width;
                height:5vw;
                bottom:3vw;
                line-height: 5vw;
                font-size:3vw;
                background-color:rgba(0, 0, 0, 0.1);
                color:white;
                padding: 0 1vw;
                .line-ellipsis(1);
                z-index: 2;
            }
            .seal-img{
                width:@width;
                height:@height;
                z-index:1;
                object-fit: cover;
            }
        }
    }

}

//pc
@media only screen and (min-width: 576px){
    @width:97px;
    @height:130px;
    .book-seal-component{
        width:@width;
        height:@height;
        display:flex;
        .content-box{
            cursor:pointer;
            margin:auto;
            width:@width;
            height:@height;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
            position:relative;
            .book-title{
                position:absolute;
                width:@width;
                height:20px;
                bottom:6px;
                line-height: 20px;
                font-size:11px;
                background-color:rgba(0, 0, 0, 0.1);
                color:white;
                padding: 0 5px;
                .line-ellipsis(1);
                z-index: 2;
            }
            .seal-img{
                width:@width;
                height:@height;
                z-index:1;
                object-fit: cover;
            }

        }
    }
}


</style>